<template>
  <div class="group-list">
    <h2>热门小组</h2>
    <div class="groups">
      <div
        class="group"
        v-for="item in groups"
        v-bind:key="item.id"
      >
        <img
          :src="item.img"
          alt=""
        />
        <div class="team">
          <p>{{item.name}}</p>
          <p>{{item.number}}</p>
          <p>+ 加入小组</p>
          <p></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Grouplist',
  data() {
    return {
      groups: [

        {
          id: '002',
          img: 'https://img.php.cn/upload/system/000/000/000/5a9110857e9ea618.jpg',
          name: 'H5讨论组',
          number: '3901位成员',

        },
        {
          id: '003',
          img: 'https://img.php.cn/upload/system/000/000/001/6123638fde6de457.png',
          name: 'JS讨论组',
          number: '9990位成员',

        },
        {
          id: '004',
          img: 'https://img.php.cn/upload/system/000/000/000/5a9110d3dc066232.jpg',
          name: 'CSS讨论组',
          number: '7787位成员',

        },
        {
          id: '001',
          img: 'https://img.php.cn/upload/system/000/000/001/612cbee53c4d0701.png',
          name: 'PHP讨论组',
          number: '3233位成员',

        },
      ]
    }
  }
};
</script>

<style>
.group-list > h2 {
  background: #fbfbfb;
  border-bottom: 1px solid #f0f0f0;
  padding-left: 15px;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  margin: 0;
}
.groups {
  padding: 20px;
  height: 140px;
  background: #fff;
}

.group img {
  border-radius: 40px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
  float: left;
  width: 80px;
  height: 80px;
  margin-right: 30px;
}
.group .team {
  float: left;
  width: 90px;
  height: 87px;
  display: flex;
  font-size: 14px;
  flex-direction: column;
  margin-right: 15px;
}
.team p {
  height: 20px;
  margin-bottom: 10px;
  line-height: 20px;
}
.team p:nth-child(2) {
  color: #999;
}
.team p:nth-child(3) {
  color: #009a61;
}
</style>